<template>
  <div id="app">
    <!-- 导航栏 -->
    <el-header class="header">
      <div class="logo">
        <h2>qiankun微前端项目</h2>
      </div>
      
      <!-- 导航按钮 -->
      <div class="nav-buttons">
        <el-button 
          :type="activeIndex === '/' ? 'primary' : 'default'"
          @click="navigateTo('/')"
          class="nav-btn"
        >
          首页
        </el-button>
        <el-button 
          :type="activeIndex.startsWith('/react-app') ? 'primary' : 'default'"
          @click="navigateTo('/react-app')"
          class="nav-btn"
        >
          React子应用
        </el-button>
        <el-button 
          :type="activeIndex.startsWith('/vue-app') ? 'primary' : 'default'"
          @click="navigateTo('/vue-app')"
          class="nav-btn"
        >
          Vue子应用
        </el-button>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main-content">
      <!-- 首页内容，仅在首页显示 -->
      <div v-show="activeIndex === '/'">
        <router-view v-if="activeIndex === '/'" />
      </div>
      <!-- React子应用容器，仅在/react-app相关路由显示 -->
      <div v-show="activeIndex.startsWith('/react-app')" class="micro-app-wrapper">
        <div id="react-container"></div>
      </div>
      <!-- Vue子应用容器，仅在/vue-app相关路由显示 -->
      <div v-show="activeIndex.startsWith('/vue-app')" class="micro-app-wrapper">
        <div id="vue-container"></div>
      </div>
    </el-main>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

/**
 * 主应用根组件
 * @description 提供导航和布局结构
 */
export default {
  name: 'App',
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 计算当前激活的菜单项
    const activeIndex = computed(() => route.path)
    console.log(activeIndex.startsWith);
    
    // 导航方法
    const navigateTo = (path) => {
      console.log('导航到:', path)
      router.push(path)
    }
    
    return {
      activeIndex,
      navigateTo
    }
  }
}
</script>

<style scoped>
/* 应用根样式 */
#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo h2 {
  margin: 0;
  font-weight: 600;
}

/* 导航按钮样式 */
.nav-buttons {
  display: flex;
  gap: 10px;
}

.nav-btn {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-btn.el-button--primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
  background: #f5f7fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    padding: 10px 20px;
    gap: 10px;
  }
  
  .nav-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .nav-btn {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* 微应用容器样式 */
.micro-app-wrapper {
  width: 100%;
  height: 100%;
  min-height: 500px;
}
</style> 